<template>
 
        <div class="right">
        <div class="right-top">
            <img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
            <img src="@/assets/calendar.svg" class="icon2" />
            <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
        </div>
        <div class="right-bottom">

            <el-calendar ref="calendar" v-model="dayValue">
                <template #header="{ date }">

                    <el-button size="small" @click="selectDate('prev-month')">
                        <img src="@/assets/arrow-left.svg">
                    </el-button>
                    <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
                    <span class="month">{{ date }}</span>

                    <el-button size="small" @click="selectDate('next-month')">
                        <img src="@/assets/arrow-right.svg">
                    </el-button>

                </template>
                <template #dateCell="{ data }">

                    <p style="margin:0px">
                        {{ data.day.split('-').slice(2).join() * 1 }}

                    <div v-for="(i, index) in dayTime" :key="index">
                        <div v-if="i.split('-').slice(2).join() * 1<=9">
                                  <div v-if="data.day == i" class="yuan1"></div> 
                                </div>
                               <div v-else>
                                <div v-if="data.day == i" class="yuan"></div> 
                               </div>
                    </div>
                    </p>
                </template>
            </el-calendar>
        </div>
        <div class="right-bottom1">
                    <Event v-if="Eventdata.length" :data="Eventdata" />
                    <div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
                </div>
       
    </div>
   
</template>

<script lang="ts">
export default {
    name: "ipocalendar",
};
</script>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"

const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date())
const calendar = ref()

const emit = defineEmits(['close'])
//const Eventdata = ref([])
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
}
watch(dayValue, async (ne, ol) => {
    const day = moment(ne).format("YYYY-MM-DD")
    const result = await getEventData(day);
    setEventdata((result as any).data)
})
const dayTime = ref()
const getcalendar = async () => {
    const res = await getDate()
    dayTime.value = (res as any).data
    console.log(dayTime.value);
}
const showMounth = (date: any) => {
    const arr = date.split(" ")
    if (arr.length == 3) {
        return arr[2]
    } else if (arr.length == 4) {
        return arr[2] + " " + arr[3]
    }
}
onMounted(async () => {
    var day = moment(Date.now()).format("YYYY-MM-DD")
    const result = await getEventData(day);
    setEventdata((result as any).data)
    getcalendar()
})
const Eventdata = ref([
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2370
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2370
    // }, {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2372
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2373
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2374
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2375
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2378
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2374
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2378
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司111111111111111111111111111",
    //     number: 2380
    // }, {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司1111111111111111111111111111",
    //     number: 2381
    // }
])
const setEventdata = (EventD: any) => {
    Eventdata.value = EventD.map((item: any) => {
        const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
        return {
            logo: '-',
            listPlatform1: listPlatform,
            name: companyEngFull + ";" + companyChiFull,
            number: stkCode
        }

    })
}
const backRouter = () => {
    proxy.$router.go(-1)
    //const drawer2 = false
//emit('close',false)

}
</script>

<style lang="scss"  scoped>
@media screen and (max-width: 768px) {
    .login{
        width: 100vw;
        height: fit-content;
        
    }
    .yuan {
        width: 12px;
        height: 12px;
        background-color: #f7be39;
        position: absolute;
        //right: 20px;
        //top: 36px;
        transform: translateY(11px);
        //transform: translateX(3px);
        margin-left: 2px;
        border-radius: 10px;
    }
.yuan1{
    width: 12px;
        height: 12px;
        background-color: #f7be39;
        position: absolute;
        //right: 20px;
        //top: 36px;
        transform: translateY(11px);
        //transform: translateX(3px);
        margin-left: -2px;
        border-radius: 10px;
}
    .right {
        width: 100vw;
        box-sizing: border-box;
       // height: 100%;
        padding-bottom: 80px;
        background-color: #1f4055;
        z-index: 1;
        border: #1f4055 1px solid;
        height: 100%;
        .right-top {
            display: flex;
            align-items: center;
            // margin-left: 40px;
            margin-top: 20px;
            transform: translateX(-10px);
            height: 25px;
         
            .top-title {
              //  text-align: center;
               // display: inline-block;
                font-size: 25px;
                color: #ffffff;
                margin-left: 10px;
                //padding-top: 6px;
            }

            .icon1 {
                width: 22px;
                height: 22px;
                margin-left: 30px;
            }

            .icon2 {
                width: 25px;
                height: 25px;
                margin-left: 10px;
            }
        }

        .right-bottom {
            width: 100vw;
            background-color: #ffffff;
            height: fit-content;
            margin-top: 25px;

            // margin-left: 20px;
            // transform: translateX(-50px);
            .month {
                font-size: 22px;
                color: #000000;
                font-weight: 500;
                text-align: center;
            }

        }

        .right-bottom1 {
            margin-left: 5vw;
            width: 90vw;
            background-color: #ffffff;
            height: 40vh;
            margin-top: 40px;
            // margin-left: 20px;
            // text-align: center;
            // line-height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
          //  overflow-y: scroll;
            .right-bottom-title1 {
               // background-color: red;
                color: #1f4055;
                font-size: 20px;
                align-items: center;
            }

            li {
                color: #000000
            }
        }
        
    }

    .right-bottom1 {
        width: 420px;
        background-color: #ffffff;
        height: 50vh;
        margin-top: 150px;
        // margin-left: 20px;
        // text-align: center;
        // line-height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;

        .right-bottom-title1 {

            color: #1f4055;
            font-size: 20px;
            align-items: center;
        }

        li {
            color: #000000
        }
    }

    :deep(.el-button--small) {
        border: none
    }

    :deep(.el-calendar__body) {
        background-color: #e8ebee;
        height: fit-content;
        padding: 12px 20px 18px
    }

    :deep(.el-calendar-table thead th) {
        // padding: 2px 0;
        font-weight: 550;
    }

    :deep(.el-calendar-table) {
        //margin-top: 20px;
        width: 100vw;
        transform: translateX(-19px);
        table-layout: fixed;
    }

    :deep(.el-calendar) {
        width: 100vw;
        font-family: "Calibri";
    }

    :deep(.el-calendar-table td) {
        border: none;
        text-align: center;
    }

    :deep(.el-calendar .el-calendar-table .el-calendar-day) {
        padding: 0px;
        text-align: center;
        line-height: 33px;
        font: 13px 'Poppins-Regular';
        background-color: rgb(255, 255, 255);
        height: 33px;
        border: none;
        margin-top: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        // font-family: "Calibri"
    }

    :deep(.el-calendar-table thead) {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        background-color: rgb(255, 255, 255);
        border: none;
        font-family: "Calibri"
    }

    :deep(.el-calendar-table td.is-selected) {
        background-color: #e8ebee;
    }

    :deep(.el-calendar-table td.is-today .el-calendar-day) {
        color: black;
        background-color: #e36466;
    }

    :deep(.el-calendar-table td.is-selected .el-calendar-day) {
        // background-color: #e36466;
        border: 3px solid #e36466;
    }

    :deep(.el-calendar-table td.is-selected .el-calendar-day span) {
        color: black;
    }

    :deep(.is-selected) {
        color: red;
    }
    :deep(.el-calendar__header){
        align-items: center
    }

}
</style>
